import React, { Component } from 'react';
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import {Link } from 'react-router';
import classnames from 'classnames';
import dia from "src/utils/dia";
import {Svg, Empty} from "src/components/common";
import { Icon,Button,Modal,StaticToast} from 'pjh-mobile-ui';
import { mFormat,mFetch,minHistory} from 'min-bridge';
import actions from "src/store/actions";

import './Details.scss';

class Details extends Component{
	constructor(props){
		super(props);
		let {draftId,draftType} = props.location.query;
		this.state = {
			draftId:(draftId||"1"),
			draftType:(draftType||"1"),
			data:{},
			applyAlert:false
		}
		this.Trading={
      "t1":"大票换小票",
      "t2":"小票换大票", 
    }
    this.Full={
      "t1":"电子银票",
      "t2":"纸质银票",
      "t3":"电子商票",
      "t4":"纸质商票",
    };
	}
	componentDidMount(){
		dia(this);
		this.getData();
	}
	getData(){
		let {draftId,draftType} = this.state;
		mFetch.fetchJson({
			data:{
				method:"enterprise.ticketDetail",
				bizContent: {
					draftId,
					draftType
				},
			},
			success:res=>{
				if(res.code == "0000"){
					let {data}=res;
					this.setState({
						data
					})
				}else{
					StaticToast.error(res.message);
				};
			}
		});
	}
	applyHandler(status){
		let {data}=this.state;
		if(status==2){
			this.Open('applyAlert')
			return false;
		};
		minHistory.push({pathname:"/app/draft/apply",query:{draftType:data.draftType,draftId:data.draftId}})
	}
	render(){
		let {data,applyAlert}=this.state;
		if(!Object.keys(data).length){
			return (null);//<Empty type='loading'/>
		};
		let _hash = `svg-${data.draftType}-i${data.draftTag}.svg`;
		return (
			<div className="draft-detail">
				<div className="dt-base mb10">
					<header className="dt-hd">
						<div className="ds-box tit">
							<h3 className="cm-flex">{data.draftName}</h3>
							<p className="flex-y"><Svg className="icon" href={require(`../Component/images/${_hash}`)}/></p>
						</div>
						<div className="ds-box inner">
							<div className="cm-flex lightspot">
								<p className="line"><span className="val">{(mFormat.units(data.amount,' ')).trim()}</span>{data.amount<10000?'元':'万'}</p>
								<p className="weaken">票面金额</p>
							</div>
							<div className="cm-flex deadline">
								<p className="line">{data.dueDate}</p>
								<p className="weaken">最近到期日</p>
							</div>
							<div className="cm-flex residue lightspot">
								<p className="line"><span className="val">{data.residueDay}</span>天</p>
								<p className="weaken">最少剩余天数</p>
							</div>
						</div>
					</header>
					<div className="other">
						<p className="row-p">票据类型： {this.Full[`t${data.draftTag}`]}</p>
						{data.draftType==2&&<p className="row-p">换票类型：{this.Trading[`t${data.tradingType}`]}</p>}
						<p className="row-p">交易城市：{data.tradingCity}</p>
						<p className="row-p">发布时间： {data.releaseDate}</p>
					</div>
				</div>
				<section className="detail-state mb10">
					<h4 className="tit-4">汇票详情</h4>
					<div>
						{data.draftDetail!=''?(
							<div dangerouslySetInnerHTML={{__html:data.draftDetail}} />
						):(
							<Empty message="暂无信息"/>
						)}
					</div>
				</section>
				{
					data.draftType==2&&(
						<section className="detail-state">
							<div className="ds-box">
								<h4 className="tit-4">置换要求：</h4>
								<div className="cm-flex">
									{data.permuteClaim}
								</div>
							</div>
							{data.permuteClaim==""&&<p className="empty flex-y"><span className="tips-txt">暂无信息</span></p>}
						</section>
					)
				}
				<div className="handler">
					<Button radius theme="info" block onClick={()=>this.applyHandler(data.draftStatus)}>提交意向</Button>
				</div>
				<Modal className="bounds-state" visible={applyAlert} radius>
					<Modal.Body>
						<p>票据已成交，请您选择其他项目</p>
					</Modal.Body>
					<Modal.Footer>
							<p className="close" size="sm" radius onClick={()=>this.Close('applyAlert')}>关闭</p>
					</Modal.Footer>
			</Modal>
			</div>
		)
	}
}



let mapStateToProps=(state)=>{
	return {
		toggle:state.userToggle,
		_detailList:state.draftList.detail_list
	};

};
let mapDispatchToProps=(dispatch)=>{
	return {
		ACTIONS:bindActionCreators(actions,dispatch)
	};
};
export default connect(mapStateToProps,mapDispatchToProps)(Details);